<template>
  <div class="setting-r-content" style="overflow-y:auto;">
    <Row class="setting-r-c_params">
      <Col span="24" class="col_1">
      <Icon style="font-size:20px;" type="md-reorder" />
      <h2>采集类型</h2>
      </Col>
      <Col span="24" class="col_2">
      <!-- <div class="button_add">
        <Button size="small" @click="addNew">新增</Button>
      </div> -->
      <div class="table_list">
        <Table border :columns="columns" :data="tableData" :loading="loading" />
      </div>
      </Col>
      <Modal v-model="dialogVisible" title="新增网关类型">
        <Form :model="addForm" :label-width="80" ref="refAdd" :rules="rules">
          <FormItem label="网关类型:" prop="name">
            <Input style="width:80%;" v-model="addForm.name" placeholder="网关类型..." />
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="dialogVisible=false;">取消</Button>
          <Button :loading="btnDisabled" type="primary" @click="onSubmit">
            <span v-if="!btnDisabled">确认</span>
            <span v-else>保存中</span>
          </Button>
        </div>
      </Modal>
    </Row>
  </div>
</template>
<script>
import { generatedColnumsType, rulesType } from "./utils";
import { postGatewayType, getGatewayType, delGatewayType } from "@/api";
export default {
  mounted() {
    this.getGatewayList();
  },
  data() {
    const vm = this;
    return {
      dialogVisible: false,
      loading: false,
      columns: [...generatedColnumsType(vm)],
      tableData: [],
      addForm: {
        name: ""
      },
      rules: {
        ...rulesType
      },
      btnDisabled: false
    };
  },
  methods: {
    // 新增
    addNew() {
      this.dialogVisible = true;
      this.btnDisabled = false;
      this.$nextTick(_ => {
        this.$refs.refAdd.resetFields();
      });
    },

    // 确定新增
    onSubmit() {
      const vm = this;
      let params = {
        ...vm.addForm
      };
      vm.$refs.refAdd.validate(valid => {
        if (valid) {
          vm.btnDisabled = true;
          postGatewayType(params).then(res => {
            if (res.code === 200) {
              vm.getGatewayList();
              setTimeout(_ => {
                vm.btnDisabled = false;
                vm.dialogVisible = false;
              }, 500);
            } else {
              vm.$Message.error(res.message);
              vm.btnDisabled = false;
            }
          });
        }
      });
    },

    // 加载列表
    getGatewayList() {
      this.loading = true;
      getGatewayType().then(res => {
        if (res.code === 200) {
          this.tableData = res.data;
          this.loading = false;
        }
      });
    },

    // 删除
    handleDelete(id) {
      const vm = this;
      delGatewayType(id).then(res => {
        if (res.code === 200) {
          vm.getGatewayList();
          vm.$Message.success("操作成功");
        } else {
          vm.$Message.error(res.message);
        }
      });
    }
  }
};
</script>
